<template>
  <div class="exams">
    <!-- 重写一下逻辑： 对于使用它的组件只需要传递一个topics即可，而该组件会自动渲染 -->
    <!-- 根据所有的topics去渲染对应的结构 -->
    <!-- 所有的选择题 -->
    <p class="title">
      一、单选题，总共{{ topics.singleChoice.length }}题，每题{{
        criterion.singleChoice
      }}分，总共{{ topics.singleChoice.length * criterion.singleChoice }}分
    </p>
    <single-choice
      v-for="topic in topics.singleChoice"
      :key="topic.tid"
      :topic="topic"
      :type="'lock'"
    ></single-choice>
    <!-- 多选 -->
    <p class="title">
      二、多项选择题，总共{{ topics.multipleChoice.length }}题，每题{{
        criterion.multipleChoice
      }}分，总共{{ topics.multipleChoice.length * criterion.multipleChoice }}分
    </p>
    <multiple-choice
      v-for="topic in topics.multipleChoice"
      :key="topic.id"
      :topic="topic"
    ></multiple-choice>
    <!-- 判断题 -->
    <p class="title">
      三、判断题，总共{{ topics.trueOrFalse.length }}题，每题{{
        criterion.trueOrFalse
      }}分，总共{{ topics.trueOrFalse.length * criterion.trueOrFalse }}分
    </p>
    <true-or-false
      v-for="topic in topics.trueOrFalse"
      :key="topic.id"
      :topic="topic"
    >
    </true-or-false>
    <!-- 填空题 -->
    <p class="title">
      四、填空题，总共{{ topics.blank.length }}题，总共？？？分
    </p>
    <blank-question
      v-for="topic in topics.blank"
      :key="topic.id"
      :topic="topic"
    >
    </blank-question>

    <!-- 主观题 -->
    <p class="title">主观题，总共{{ topics.essay.length }}题，总共？？？分</p>
    <essay-question
      v-for="topic in topics.essay"
      :key="topic.id"
      :topic="topic"
    >
    </essay-question>
  </div>
</template>

<script>
/**
 * TODOS:
 * 1. 没有序号计算，有些组件的order都不见了
 * 2. 报看
 * 3. 未支持到答题卡，感觉答题卡反而复杂了。
 */
import SingleChoice from "@/components/question_types/SingleChoice.vue";
import MultipleChoice from "@/components/question_types/MultipleChoice.vue";
import TrueOrFalse from "@/components/question_types/TrueOrFalse.vue";
import BlankQuestion from "@/components/question_types/BlankQuestion.vue";
import EssayQuestion from "@/components/question_types/EssayQuestion.vue";
export default {
  props: ["topics", "finish"],
  components: {
    SingleChoice,
    MultipleChoice,
    TrueOrFalse,
    BlankQuestion,
    EssayQuestion,
  },
  methods: {
    handleClick(choice) {
      this.topic.choice = choice;
      this.topic.opts.forEach((v) => {
        // v.order===choice.order?v.selected=true:v.selected=false
        v.selected = false;
      });
      choice.selected = true;
    },
    // 通过传递索引
    // 感觉又有问题，完成的方法不应该在父元素身上而应该在子元素身上，父元素只需要把done值改了，就像现在这样其实，没问题。

    // finish(eIndex) {
    //   // 获取项
    //   this.topics[eIndex].done = true;
    // },
  },
};
</script>

<style lang="less" scoped>
.exams {
  background-color: #fff;
  ul {
    list-style: none;
    li {
    }
  }
}
</style>